<template>
  <div>
    <h2 v-show="show">我是示例盒子</h2>

    <button @click="toggle">点击显示和隐藏</button>
  </div>
</template>

<script>
//ref就是一个组合式api，用来控制响应式数据
import { ref } from 'vue'

export default {
  //先准备一个setup函数
  setup () {
    //准备变量
    console.log(this)

    const show = ref(true)

    //声明方法
    const toggle = () => {
      show.value = !show.value
    }

    //要有返回值
    return { show, toggle }
  }
}
</script>

<!-- <script>
export default {
  data () {
    return {
      show: true
    }
  },

  methods: {
    toggle () {
      this.show = !this.show
    }
  }
}
</script> -->

<style lang="less"></style>
